<template>
	<div>
		<header id="header" class="mui-bar mui-bar-nav">
			<h1 class="mui-title">工具集</h1>
		</header>
		<app-nav-bar></app-nav-bar>
		<div class="mui-content has-bottom-bar">
			<div class="top-box-content">
				<div class="top-item bg-color-f08800">
					<div class="img-box">
						<img src="../../../assets/images/tool/prospectus-net-bg.png">
					</div>
					<h3 class="top-item-h3" v-if="!islogin">请先登录</h3>
					<h3 class="top-item-h3" v-if="islogin&&InsurancePlan">17份个人计划书</h3>
					<h3 class="top-item-h3" v-if="islogin&&!InsurancePlan">暂未创建计划书</h3>
				</div>
				<div class="top-item bg-color-3E4DFC">
					<div class="img-box">
						<img src="../../../assets/images/tool/guarantee-net-bg.png">
					</div>
					<h3 class="top-item-h3" v-if="!islogin">请先登录</h3>
					<h3 class="top-item-h3" v-if="islogin&&FamilyPlan">5份家庭保障方案</h3>
					<h3 class="top-item-h3" v-if="islogin&&!FamilyPlan">暂未创建方案</h3>
				</div>
				
			</div>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<router-link :to="{name:islogin?'Card':'Login'}" class="mui-navigate-right">
						<img class="mui-media-object mui-pull-left app-mind-img" src="../../../assets/images/tool/icon-card.png">
						<div class="mui-media-body mind-list-li">名片</div>
					</router-link>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<router-link :to="{name:islogin?'Insuer':'Login'}" class="mui-navigate-right">
						<img class="mui-media-object mui-pull-left app-mind-img" src="../../../assets/images/tool/icon-jihua.png">
						<div class="mui-media-body mind-list-li">个人计划书</div>
					</router-link>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<router-link :to="{name:islogin?'FamilyPlan':'Login'}" class="mui-navigate-right">
						<img class="mui-media-object mui-pull-left app-mind-img" src="../../../assets/images/tool/icon-guarantee.png">
						<div class="mui-media-body mind-list-li">家庭保障方案</div>
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
	import NavBar from '../../../components/public/tabNavBar.vue'
	import {api} from '../../../gloabl/api.js'
	import {getCookie} from '../../../gloabl/common.js'
	export default{
		data(){
			return{
				islogin:false,
				InsurancePlan:0,//计划书
				FamilyPlan:0,//方案
			}
		},
		components:{
			'app-nav-bar':NavBar
		},
		created:function(){
			if(getCookie('user_info')){
				this.islogin=true;
				let sid = JSON.parse(getCookie('user_info')).sid;
				this.getCountData(sid);
			}else{
				this.islogin=false;
			}
		},
		methods:{
			getCountData(sid){
				let me = this;
				let query = '{'+api.queryUserCreatedToolsCount('"'+sid+'"')+'}';
				me.$http.post(url.graphql,{query:query}).then((res)=>{
					me.FamilyPlan = res.data.data.queryUserCreatedToolsCount.familyPlanCount;
					me.InsurancePlan = res.data.data.queryUserCreatedToolsCount.insurancePlanCount;
				}).catch(function (error) {
					mui.alert('请求超时')
				})
			}
		}
	}
</script>
<style scoped="scoped">
	.top-box-content{
		background-color: #FFFFFF;
		width: 100%;
		height: 175px;
	}
	.top-item{
		width: 44%;
		margin: 15px 3%;
		color: #FFFFFF;
		float: left;
		border-radius: 8px;
	}
	.bg-color-f08800{
		background-image: linear-gradient(-133deg, #FEB207  0%, #F08800 100%);
		-moz-box-shadow:0px 6px 3px #F0880030;
		-webkit-box-shadow:0px 6px 3px #F0880030;
		box-shadow:0px 6px 3px #F0880030;
	}
	.bg-color-3E4DFC{
		background-image: linear-gradient(-134deg, #2DB2FE 0%, #3E4DFC 100%);
		-moz-box-shadow:0px 6px 3px #3E4DFC30;
		-webkit-box-shadow:0px 6px 3px #3E4DFC30;
		box-shadow:0px 6px 3px #3E4DFC30;
	}
	.img-box{
		margin-top:15px;
		width: 100%;
		text-align: center;
	}
	.img-box img{
		width: 40px;
		height: 42px;
	}
	.top-item-h3{
		margin: 15px 0;
		color: #FFFFFF;
		font-size: 14px;
		font-weight: 500;
		margin-bottom: 30px;
		text-align: center;
	}
	.app-mind-img{
		width: 32px;
		height: 32px;
	}
	.mind-list-li{
		line-height: 32px;
		text-align: left;
		font-size: 14px;
	}
	.mui-table-view{
		margin-bottom: 10px;
	}
</style>